<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :headers="headers"
      name="good_pic"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div>=================================</div>
    <el-upload
      class="avatar-uploader"
      action
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="uploadImg"
    >
      <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { UploadImgApi } from '../../request/api'
export default {
  data() {
    return {
      imageUrl: '',
      imageUrl1: '',
      headers: {
        'X-Nideshop-Token': localStorage.getItem('token')
      }
    }
  },

  methods: {
    handleAvatarSuccess(response, file, fileList) {
      console.log(response, file, fileList)
      this.imageUrl = response.data.fileUrl;
    },
    beforeAvatarUpload(file, fileList) {
      console.log(file, fileList);
    },
    // 第二种方式上传图片
    uploadImg(item) {
      console.log(item)
      let form = new FormData()
      form.append('good_pic', item.file)     //
      UploadImgApi(form).then(res => {
        console.log(res)
        if (res.errno === 0) {
          this.imageUrl1 = res.data.fileUrl
        }
      })
    }


  },

}
</script>

<style lang="less" scoped>
</style>